<template>
  <div class="steps">
    <a-steps
      v-model="stepsCurrent"
      class="step_bos"
      type="navigation"
      size="small"
      :style="stepStyle"
      @change="onChange"
    >
      <a-step
        v-for="(item, index) in stepTitle"
        :key="index"
        :title="item"
        :disabled="index > stepsCurrent"
      />
    </a-steps>
  </div>
</template>
<script>
import { Mixin } from "@/mixins/mixin.js";
export default {
  mixins: [Mixin],
  props: ["current"],
  data() {
    return {
      stepTitle: ["企业信息", "核算数据", "数据确认", "核算结果"],
      stepStyle: {
        boxShadow: "0px -1px 0 0 #e8e8e8 inset"
      }
    };
  },
  methods: {
    onChange(current) {
      //   console.log(current);
      this.setStepsCurrent(current);
    }
  }
};
</script>
<style lang="scss">
.ant-tabs-nav-scroll {
  text-align: left !important;
}
.steps {
  text-align: left;
  width: 100%;

  .step_bos {
    height: 100%;
    // box-shadow: rgb(255, 255, 255) 0px -1px 0px 0px inset;
  }
  .ant-steps-navigation .ant-steps-item::before {
    background-color: #50baf3 !important;
    z-index: 99;
  }
  .ant-steps-item {
    //   background: rgba(255, 255, 255, 0.5);
  }
  .ant-steps-item-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .ant-steps-item-process .ant-steps-item-icon {
    background-color: #50baf3 !important;
    border: 1px solid rgba(255, 255, 255, 1);
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
  .ant-steps-item-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    font-family: "Roboto-Bold-3" !important;
  }
}
</style>